<template>
 
 <div class="head">
<div class="up">
  <div class="left">
    路在脚下
  </div>
  <div class="right">
    <span>HOME</span>
    <span>WORKS</span>
    <span>DAILY</span>
    <span>ABOUT</span>
  </div>
</div>
<div class="mid">
  <div class="title">路在脚下</div>
 <div> <text>保持热爱，眼中有光。初心不忘，未来无畏。</text></div>
</div>
  
 </div>
 <div class="body">
   <div class="item" v-for="(item,i) in cnt">
     <a :href=" 'http://localhost:3000/'+url[i]" target="_blank" ><div class="title">{{ item.title }}</div>
   <text>
    {{ item.introduction }}
   </text>
    <div class="time">
      {{ item.time }}
    </div>
    </a>
  </div>

 </div>


</template>

<script>


import { useStore } from "./store/index.js";
import mojs from '@mojs/core'

const SWIRL_OPTS = {
  left: 0, top: 0,
  fill:           '#F93E39',
  duration:       'rand(600, 1000)',
  radius:         'rand(10, 20)',
  pathScale:      'rand(.5, 1)',
  swirlFrequency: 'rand(2,4)',
  swirlSize: 'rand(6,14)',
}

const swirl1 = new mojs.ShapeSwirl({
  ...SWIRL_OPTS
});
  
const swirl2 = new mojs.ShapeSwirl({
  ...SWIRL_OPTS,
  direction: -1
});

const swirl3 = new mojs.ShapeSwirl({
  ...SWIRL_OPTS
});
  
const swirl4 = new mojs.ShapeSwirl({
  ...SWIRL_OPTS
});

document.addEventListener('click', function (e) {
  const x = e.pageX,
        y = { [e.pageY]: e.pageY-150 };
  swirl1
    .tune({ x, y })
    .generate()
    .replay();
  
  swirl2
    .tune({ x, y })
    .generate()
    .replay();
  
  swirl3
    .tune({ x, y })
    .generate()
    .replay();
  
  swirl4
    .tune({ x, y })
    .generate()
    .replay();
  
});


export default {
  name: 'App',
  
  setup(){
    const store = useStore();
     const url=['text1','text2']
    const cnt =JSON.parse(JSON.stringify(store.item))
    console.log(cnt)
   
   return {cnt,url};
  },
  components: {
    
  }
}
</script>

<style >
a{
  text-decoration : none;
}
body{
  margin: 0;
  padding:0;
  width: 100vw;
  box-sizing: border-box;
  overflow: hidden;
}

.head{
  background-color: rgb(16, 154, 69);
  width: 100vw;
  margin-top:0;
  margin:0 auto;
  height:400px;
  padding: 0;
}
.up{
  display: flex;
  height: 130px;
  flex-direction: row;
  justify-content: center;
}
.up .left{
  width: 60%;
  font-size: 24px;
  font-weight: 900;
  display: flex;
  justify-content: start;
  height: 70px;
  line-height: 70px;
}
.up .right{
  width: 39%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  font-size: 20px;
  height: 70px;
  line-height: 70px;
  font-weight: 900;
}
.title{
  font-size: 70px;
  font-weight: 900;
  color:#fff;
  margin:0 auto;
  
  
}
.mid{
  color:#fff;
  /* display: flex;
  justify-content: center;
  align-items: center;
   flex-wrap: wrap; */
   margin-left:500px;
   height: 120px;
}
.mid text{
  margin-bottom:-10px;
  
}

.body{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vh;
}
.body .item{
  width: 90%;
 padding: 0;
  margin:0 auto;
  margin-left:300px;
  display: flex;
  flex-direction: column;
  border-bottom: #e9e2e2 solid 1px;
}
.item .title{
  color:#fff;
  font-size: 29px;
  color:#404040;
  font-weight: 900;
  display: flex;
  justify-content: flex-start;
  padding:10px 0;
  
}
.item text{

       
      width: 700px;
      padding: 0;
       margin: 0;
       z-index: 0;
       display: flex;
       justify-content: flex-start;
      color:#a3a3a3;
      font-size: 13px;;

}
.time{
   color:#808080;
   display: flex;
  justify-content: flex-start;
   font:18px;
   padding: 10px 0;
}
</style>
